我的月亮
<template>
  <TresMesh :position="props.position" :cast-shadow="true">
    <TresSphereGeometry :args="[0.4, 32]" />
    <TresMeshBasicMaterial :color="props.color" />
  </TresMesh>
  <!-- 月亮的光 -->
  <TresPointLight
    ref="moonLight"
    :position="props.position"
    :intensity="100"
    :cast-shadow="true"
    :look-at="new THREE.Vector3(0, 0, 0)"
  />
  <!-- 辅助器月亮的光 -->
  <TresPointLightHelper v-if="moonLight" :args="[moonLight, 10]" />
</template>

<script setup lang="ts">
import * as THREE from "three";
import { ref, onMounted } from "vue";
const props = withDefaults(
  defineProps<{
    color?: THREE.Color;
    position?: THREE.Vector3;
  }>(),
  {
    color(props) {
      return new THREE.Color("white");
    },
    position(props) {
      return new THREE.Vector3(0, 5, -5);
    },
  }
);
const moonLight = ref<THREE.PointLight>();
onMounted(() => {
  moonLight.value!.shadow.mapSize.width = 1024;
  moonLight.value!.shadow.mapSize.height = 1024;
  moonLight.value!.shadow.radius = 1;
  /**
     * moonLight.value!.shadow.camera.near = 0.5;
    moonLight.value!.shadow.camera.far = 500;
    moonLight.value!.shadow.camera.fov = 30;
     */
});
</script>

<style scoped></style>
